import React from 'react'
import '../../assets/css/profile/allorder.less'
import {Modal} from 'antd-mobile'
import 'antd-mobile/lib/modal/style/index.css'
export default class AllOrderComponents extends React.Component{
    constructor(){
        super()
        this.state={
            id:'all',
            data:[],
            allorder:[],
            order2:[],
            order3:[],
            comPage:1,
            com:[]
        }
    }
    componentDidMount() {
        console.log(this.props.history);
        if(this.props.history.location.query!==undefined){
            this.setState({
                id:this.props.history.location.query.id
            },()=>{
                this.getNavData()
            })
        }
        //测试，需删除
        this.getNavData()

    }
    //根据nav获取数据
    getNavData(){
        console.log('lai');
        if(this.state.id==='all'){
            console.log('all');
            this.getData(this.state.id,1,()=>{ this.setState({
                allorder:this.state.data
            })})

        }else if(this.state.id==='0'){
            console.log('0');
            this.getData(this.state.id,1,()=>{this.setState({
                order2:this.state.data
            },()=>{
                console.log('1',this.state.order2);
            })})
        }else if(this.state.id==='1'){
            console.log('1');
            this.getData(this.state.id,1,()=>{
                this.setState({
                    order3:this.state.data
                })
            })
        }else if(this.state.id==='2'){
            this.getCom(this.state.comPage)
        }
    }
    //获取评论
    getCom(page){
        fetch('http://vueshop.glbuys.com/api/user/myorder/reviewOrder?uid='+localStorage['uid']+'&page='+page+'&token=1ec949a15fb709370f').then((res)=>res.json())
            .then((res)=>{
                console.log(res.data);
                if(res.code===200){
                    this.setState({
                        com:res.data
                    })
                }
            })
    }
    //nav选中
    checkNav(index){

        if(index===this.state.id){
            return
        }
        console.log(index);
        this.setState({
            id:index
        },()=>{
            this.getNavData()
        })
    }
    //获取数据
    getData(state,page,fn){
        fetch('http://vueshop.glbuys.com/api/user/myorder/index?uid='+localStorage['uid']+'&status='+state+'&token=1ec949a15fb709370f&page='+page+'').then((res)=>res.json())
            .then((res)=>{
                console.log(res.data);
                if(res.code===200){
                   this.setState({
                       data:res.data
                   },fn)
                }else{
                    this.setState({
                        data:[]
                    },fn)
                }
            })
    }
    goInfo(code){
        this.props.history.push({
            pathname:'/profile/order/info',
            query:{
                id:code
            }
        })
    }
    // 取消订单
    calcel(num){
        console.log(num);
        Modal.alert('提示', '您确定要删除吗？', [
            {
                text: '取消',
                onPress: () =>{}
            },
            { text: '确定', onPress:() =>{
                    fetch('http://vueshop.glbuys.com/api/user/myorder/clearorder?uid='+localStorage['uid']+'&ordernum='+num+'&token=1ec949a15fb709370f' ).then((res)=>res.json())
                        .then((res)=>{
                            console.log(res.data);
                            if(res.code===200){
                                this.getNavData()
                            }
                        })
                } },
        ])
    }
    goBuy(num){
        console.log('1');
        fetch('http://vueshop.glbuys.com/api/user/myorder/finalorder?uid='+localStorage['uid']+'&ordernum='+num+'&token=1ec949a15fb709370f' ).then((res)=>res.json())
            .then((res)=>{
                console.log(res.data);
                if(res.code===200){
                    this.getNavData()
                }
            })
    }
    goBack(){
        this.props.history.goBack()
    }
    render() {
        return(
            <div id='allorder'>
                <div className='header'>
                    <div onClick={this.goBack.bind(this)}>
                        <img src="/images/user/my/返回.png" alt=""/>
                    </div>
                    <div>
                        {this.state.id === 'all'?'全部订单':''}
                        {this.state.id === '0'?'待付款':''}
                        {this.state.id === '1'?'待收货':''}
                        {this.state.id === '2'?'待评价':''}

                    </div>
                    <div></div>
                </div>
                <div className='nav'>
                    <div style={this.state.id==='all'?{borderBottom:'1px solid red'}:{}} onClick={this.checkNav.bind(this,'all')}>全部订单</div>
                    <div style={this.state.id==='0'?{borderBottom:'1px solid red'}:{}} onClick={this.checkNav.bind(this,'0')}>待付款</div>
                    <div style={this.state.id==='1'?{borderBottom:'1px solid red'}:{}} onClick={this.checkNav.bind(this,'1')}>待收货</div>
                    <div style={this.state.id==='2'?{borderBottom:'1px solid red'}:{}} onClick={this.checkNav.bind(this,'2')}>待评价</div>
                </div>
                <div className='order' style={this.state.id === 'all'?{}:{display:'none'}}>
                    {this.state.allorder.map((item,index)=>{
                        return(
                            <div key={index} className='item'
                   >
                                <div className='item-code' onClick={this.goInfo.bind(this,item.ordernum)}>
                                    <div>订单编号:{item.ordernum}</div>
                                    <div>{item.status==='0'?'待付款':''}{item.status==='1'?'待收货':''}{item.status==='2'?'已收货':''}</div>
                                </div>
                                {item.goods.map((item2,index2)=>{
                                    return(
                                        <div className='item-goods' key={index2}          onClick={this.goInfo.bind(this,item.ordernum)}>
                                            <div>
                                                <img src={item2.image} alt=""/>
                                                <div>
                                                    <div className='title'>{item2.title}</div>
                                                    <div className='count'>x {item2.amount}</div>
                                                </div>
                                            </div>
                                        </div>
                                    )
                                })}
                                <div className='item-price'>
                                    <div>实付金额:￥{item.total}</div>
                                    {item.status==='0'?
                                        <div>
                                            <div onClick={this.calcel.bind(this,item.ordernum)}>取消订单</div>
                                            <div onClick={this.goBuy.bind(this,item.ordernum)}>去付款</div>
                                        </div>:''
                                    }
                                    {item.status==='1'?
                                        <div>
                                            <div>待收货</div>
                                        </div>:''
                                    }
                                    {item.status==='2'?
                                        <div>
                                            <div>已收货</div>
                                        </div>:''
                                    }

                                </div>
                            </div>
                        )
                    })}
                </div>
                <div className='order' style={this.state.id === '0'?{}:{display:'none'}}>
                    {this.state.order2.map((item,index)=>{
                        return(
                            <div key={index} className='item' >
                                <div className='item-code'  onClick={this.goInfo.bind(this,item.ordernum)}>
                                    <div>订单编号:{item.ordernum}</div>
                                    <div>{item.status==='0'?'待付款':''}{item.status==='1'?'待收货':''}{item.status==='2'?'已收货':''}</div>
                                </div>
                                {item.goods.map((item2,index2)=>{
                                    return(
                                        <div className='item-goods' key={index2}  onClick={this.goInfo.bind(this,item.ordernum)}>
                                            <div>
                                                <img src={item2.image} alt=""/>
                                                <div>
                                                    <div className='title'>{item2.title}</div>
                                                    <div className='count'>x {item2.amount}</div>
                                                </div>
                                            </div>
                                        </div>
                                    )
                                })}
                                <div className='item-price'>
                                    <div>实付金额:￥{item.total}</div>
                                    {item.status==='0'?
                                        <div>
                                            <div  onClick={this.calcel.bind(this)}>取消订单</div>
                                            <div onClick={this.goBuy.bind(this,item.ordernum)}>去付款</div>
                                        </div>:''
                                    }
                                    {item.status==='1'?
                                        <div>
                                            <div>待收货</div>
                                        </div>:''
                                    }
                                    {item.status==='2'?
                                        <div>
                                            <div>已收货</div>
                                        </div>:''
                                    }

                                </div>
                            </div>
                        )
                    })}
                </div>
                <div className='order' style={this.state.id === '1'?{}:{display:'none'}}>
                    {this.state.order3.map((item,index)=>{
                        return(
                            <div key={index} className='item'  >
                                <div className='item-code'  onClick={this.goInfo.bind(this,item.ordernum)}>
                                    <div>订单编号:{item.ordernum}</div>
                                    <div>{item.status==='0'?'待付款':''}{item.status==='1'?'待收货':''}{item.status==='2'?'已收货':''}</div>
                                </div>
                                {item.goods.map((item2,index2)=>{
                                    return(
                                        <div className='item-goods' key={index2}  onClick={this.goInfo.bind(this,item.ordernum)}>
                                            <div>
                                                <img src={item2.image} alt=""/>
                                                <div>
                                                    <div className='title'>{item2.title}</div>
                                                    <div className='count'>x {item2.amount}</div>
                                                </div>
                                            </div>
                                        </div>
                                    )
                                })}
                                <div className='item-price'>
                                    <div>实付金额:￥{item.total}</div>
                                    {item.status==='0'?
                                        <div>
                                            <div  onClick={this.calcel.bind(this)}>取消订单</div>
                                            <div onClick={this.goBuy.bind(this,item.ordernum)}>去付款</div>
                                        </div>:''
                                    }
                                    {item.status==='1'?
                                        <div>
                                            <div>待收货</div>
                                        </div>:''
                                    }
                                    {item.status==='2'?
                                        <div>
                                            <div>已收货</div>
                                        </div>:''
                                    }

                                </div>
                            </div>
                        )
                    })}
                </div>
                <div className='order' style={this.state.id === '2'?{}:{display:'none'}}>
                    {this.state.com.map((item,index)=>{
                        return(
                            <div key={index} className='item' >
                                <div className='item-code'  onClick={this.goInfo.bind(this,item.ordernum)}>
                                    <div>订单编号:{item.ordernum}</div>
                                    <div>{item.status==='0'?'待付款':''}{item.status==='1'?'待收货':''}{item.status==='2'?'已收货':''}</div>
                                </div>
                                {item.goods.map((item2,index2)=>{
                                    return(
                                        <div className='item-goods' key={index2} >
                                            <div style={{border:'none'}}  onClick={this.goInfo.bind(this,item.ordernum)}>
                                                <img src={item2.image} alt=""/>
                                                <div>
                                                    <div className='title'>{item2.title}</div>
                                                    <div className='count'>x {item2.amount}</div>
                                                </div>
                                            </div>
                                            <div className='btn' style={{
                                                justifyContent:'flex-end'
                                            }}>
                                                <div style={{
                                                    border:'1px solid red',
                                                    padding:'3px 10px',
                                                    borderRadius:'5px'
                                                }}>评价</div>
                                            </div>
                                        </div>
                                    )
                                })}

                            </div>
                        )
                    })}
                </div>
            </div>
        )
    }
}